<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<script>
  // 1. 对象访问操作属性, 有两个语法 (点语法 和 中括号语法)

  // 2. 点语法:
  //    对象名.属性名         访问对象的属性
  //    对象名.属性名 = 值    操作对象的属性 (添加, 覆盖)

  // 3. 中括号语法:
  //    对象名['属性名']         访问对象的属性
  //    对象名['属性名'] = 值    操作对象的属性 (添加, 覆盖)

  // 4. 中括号语法, [] 内可以解析变量, 还可以解析表达式 (es6 属性名表达式)   表达式: 有结果的式子
  //    会将解析出来的结果, 作为属性名

  // const obj = {
  //   name: 'zs',
  //   age: 18
  // }
  // console.log(obj.name) // 访问对象的属性
  // obj.name = 'ls'       // 操作对象的属性 (覆盖)
  // obj.desc = '不错'      // 操作对象的属性 (添加)

  const obj = {
    name: 'zs',
    age: 18
  }
  console.log(obj['name']) // 访问对象的属性
  obj['name'] = 'ls'       // 操作对象的属性 (覆盖)
  obj['desc'] = '不错'      // 操作对象的属性 (添加)
  obj['car'] = '小黄车'

  const str = 'msg'
  obj[str] = '哈哈'   // 给obj对象, 添加了一个 msg 属性

  obj['user' + 'name'] = '小黑' // 给obj对象, 添加了一个 username 属性


  function fn () {
    return 'test'
  }
  obj[fn() + '123'] = '嘿嘿'


  for (let key in obj) {
    // console.log(key, obj)
    console.log(key, obj[key])
  }


</script>
  
</body>
</html>